var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development", 
    // entry: './src/index.js',
    entry:["@babel/polyfill",path.resolve(__dirname,'./src/index.js')],
    output: {
        filename: 'bunld.js',      //打包后index.js的名字，
        // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                use:{
                  loader:'babel-loader',
                  options:{
                    presets:['@babel/preset-env']
                  }
                },
                exclude:/node_modules/ //排除这个文件夹
            },
            {
                test: /\.(jpe?g|png|gif)$/i, //图片文件
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 10240, //小于1M会返回 base64
                      fallback: {
                        loader: 'file-loader',//大于1M会用file-loader处理，将文件移动到输出的目录中
                        options: {
                            name: 'img/[name].[hash:8].[ext]' // 会创建img文件夹，里面的图片名是name+hash+后缀名：a.xdsf32g.png
                        }
                      }
                    }
                  }
                ]
              },
        ]
    },

    //插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
        template:'./index.html'  
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[hash].css",
            chunkFilename: "[id].css",
        })
    ]
}